<template>
  <div class="box">
    <van-nav-bar left-arrow @click-left="onClickLeft" size="18px" color="#000"/>

    <h4>忘记密码</h4>

    <!-- <h2>{{this.$store.state.count}}</h2> -->
    
    <van-cell-group>
      <van-field
        v-model="phone"
        clearable
        placeholder="手机号/邮箱"
        error-message
        class="ipt"
        ref="ipt1"
      />

      <van-field v-model="sms" center clearable placeholder="验证码" class="ipt" ref="ipt3">
        <van-button slot="button" size="small" type="primary" @click="gai()" >获取验证码</van-button>
      </van-field>
      <van-field v-model="username" placeholder="密码（6位或以上）" class="ipt" ref="ipt2"/>
    </van-cell-group>

    <van-button type="primary" size="large" class="btn-l" @click="top()">确定</van-button>

    <router-view></router-view>
  </div>
</template>
   

<script>
  import qs from 'Qs';
  import axios from "axios";


  export default {
  name: "Forget",
  data() {
    return {
      username: "",
      phone: "",
      sms: "",
      token:this.$store.state.token,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    gai(){
       var _this=this
      axios({
        method: "post",
        url: "http://10.8.158.37:8080/sportapp/getVerCode.do ",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },

        data: qs.stringify({
          // username: _this.$refs.ipt1.value,
          // password: _this.$refs.ipt2.value,
          token:_this.token
        })
      }).then(function(res) {
        console.log(res.data);
      });


    },
    top() {
      var _this=this
      console.log(this.token)
      console.log(this.$refs.ipt3.value)
      axios({
        method: "post",
        url: "http://10.8.158.37:8080/sportapp/modifierPassword.do",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },

        data: qs.stringify({
          username: _this.$refs.ipt1.value,
          password: _this.$refs.ipt2.value,
          verCode1: _this.$refs.ipt3.value,
          token:_this.token
        })
      }).then(function(res) {
        console.log(res.data);
      });
    }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  overflow: hidden;
  /* margin-top: 100px; */
  padding: 170px 20px 0 20px;
  box-sizing: border-box;
}
.box p {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}
.box p .btn {
  border: none;
}
.box .btn-l {
  margin: 40px 0 0 0;
  font-size: 20px;
}
.box h4 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
